<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>editor demo</title>
    <meta name="renderer" content="webkit">
    <style>
        .container-main {
            display: flex;
            flex-direction: row;
            height: 500px;
            margin: 20px;
        }

        #container {
            flex: 1;
            border: 1px solid #cc0f1e;
        }

        #content {
            margin-left: 20px;
            flex: 1;
            border: 1px solid #cc0f1e;
        }
    </style>
    <!--ace 编辑器-->
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.24.2/ace.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.24.2/ext-language_tools.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.24.2/ext-inline_autocomplete.min.js"></script>

    <!--    layui框架 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/css/layui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/layui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button type="button" class="layui-btn" onclick="onSubmit()">提交文本</button>
<div class="container-main">
    <div id="container"></div>
    <div id="content"></div>
    </blockquote>
</div>
<div>
    <h1>Receive: <span id="sse"></span></h1>

</div>
</body>
<!--<script>-->
<!--    const numberElement = document.getElementById("sse");-->
<!--    // const source = new EventSource('http://localhost:8580/sseget');-->
<!--    const source = new EventSource('http://localhost:8580/sse/create?clientId=b');-->

<!--    source.onmessage = (event) => {-->
<!--        debugger;-->
<!--        numberElement.innerText = event.data;-->
<!--    };-->

<!--    source.onerror = (error) => {-->
<!--        console.error("SSE error:", error);-->
<!--    };-->
<!--</script>-->
<script th:inline="javascript">
    var aceEditor = ace.edit("container", {
        useWorker: false,
        theme: "ace/theme/eclipse",
        mode: "ace/mode/python",
        // mode: "ace/mode/html",
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        value: ""
    });

    var contentEditor = ace.edit("content", {
        useWorker: false,
        theme: "ace/theme/eclipse",
        // mode: "ace/mode/html",
        mode: "ace/mode/python",
        enableBasicAutocompletion: true, // 代码提示
        enableSnippets: true, // 代码提示
        enableLiveAutocompletion: true, // 代码提示
        value: ""
    });
    contentEditor.setReadOnly(false);


    function onSubmit() {
        $.ajax({
            url: 'text',
            type: 'post',
            contentType: 'application/json',
            data: aceEditor.getValue(),
            success: function (data) {
                debugger;
                console.log(data);
                contentEditor.setValue(data)

            }
        });
    }


    layui.config({
        base: '/res/js/modules/', //你存放新模块的目录，注意，不是 layui 的模块目录
        debug: true,
        version: true // 更新模块缓存，默认不开启。
    }).use('index', function () {
        var layer = layui.layer;
        console.log("layui", layer);
    });
</script>
</html>